<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 class="city"></h3>
    <script>
        /* 目标：使用 XMLHttpRequest
        创建 XMLHttpRequest 对象
        配置请求方法和请求 url 地址
        监听 loadend 事件
        发起请求
        */
       const xhr = new XMLHttpRequest()

       xhr.open('GET', 'http://hmajax.itheima.net/api/province')

       xhr.addEventListener('loadend', () => {
        // 无论成功还是失败 都会返回 JSON字符串
        console.log(xhr.response);
        // 转化为对象
        const data = JSON.parse(xhr.response)
        console.log(data)// 对象
        console.log(data.list)// 数组
        console.log(data.list.join('<br>')) // 数组转字符串
        document.querySelector('.city').innerHTML = data.list.join('<br>')
       })

       xhr.send()
    </script>
</body>
</html>